<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
 
</head>
 <script type="text/javascript">
     var jq = jQuery.noConflict();
 </script>
  
 <title>Búsqueda de clientes por número</title>
 
</head>
<body>
 <div style="float:left;">
<jsp:include page="/WEB-INF/views/menu.jsp" />
</div>
<div style="float:left;">
<h3>Búsqueda de clientes</h3>
 
<div style="border: 1px solid #ccc; width: 250px;">
Ingrese el número de cliente:
 <input id="nro" name="nro" type="text">
 
 <input id="buscarId" type="submit" value="Buscar" onclick= "buscar()" />
</div>
<br/>
<fieldset>
        <legend>Listado de clientes</legend>
           
    <table>
        <thead>
            <tr>
                <th>Número de cliente</th>
                <th>Nombre</th>
                <th>NIF</th>
                <th>Domicilio</th>
                <th>Localidad</th>
                <th>Provincia</th>
                <th>Código Postal</th>
            </tr>
      </thead>     
        <tbody>
        
            <tr> 
            	
                <td align="center"><span id="resultadoNumero"></span></td>
                <td align="center"><span id="resultadoNombre"></span></td>
                <td align="center"><span id="resultadoNIF"></span></td>
                <td align="center"><span id="resultadoDomicilio"></span></td>
                <td align="center"><span id="resultadoLocalidad"></span></td>
                <td align="center"><span id="resultadoProvincia"></span></td>
                <td align="center"><span id="resultadoCodigoPostal"></span></td>
            </tr>
        </tbody>
  </table>
</fieldset>
 <span id="noEncontrado"></span>
 
<script type="text/javascript">
 
function buscar() {
	;
 jq(function() {
  jq.post("busquedaPorId",
     {  id:  jq("#nro").val()},
      function(cliente){ 
    	 if(cliente.id>0){
       jq("#resultadoNumero").replaceWith('<span id="resultadoNumero">'+ cliente.id + '</span>');
       jq("#resultadoNombre").replaceWith('<span id="resultadoNombre">'+ cliente.nombre + '</span>');
       jq("#resultadoNIF").replaceWith('<span id="resultadoNIF">'+ cliente.nif + '</span>');
       jq("#resultadoDomicilio").replaceWith('<span id="resultadoDomicilio">'+ cliente.domicilio + '</span>');
       jq("#resultadoLocalidad").replaceWith('<span id="resultadoLocalidad">'+ cliente.localidad + '</span>');
       jq("#resultadoProvincia").replaceWith('<span id="resultadoProvincia">'+ cliente.provincia + '</span>');
       jq("#resultadoCodigoPostal").replaceWith('<span id="resultadoCodigoPostal">'+ cliente.codigoPostal + '</span>');
       jq("#noEncontrado").replaceWith('<span id="noEncontrado"></span>');
     }
    	 else{
    		jq("#noEncontrado").replaceWith('<span id="noEncontrado">'+ 'No se encontraron clientes que cumplan con el criterio requerido'+'</span>');
    		jq("#resultadoNumero").replaceWith('<span id="resultadoNumero"></span>');
    	       jq("#resultadoNombre").replaceWith('<span id="resultadoNombre"></span>');
    	       jq("#resultadoNIF").replaceWith('<span id="resultadoNIF"></span>');
    	       jq("#resultadoDomicilio").replaceWith('<span id="resultadoDomicilio"></span>');
    	       jq("#resultadoLocalidad").replaceWith('<span id="resultadoLocalidad"></span>');
    	       jq("#resultadoProvincia").replaceWith('<span id="resultadoProvincia"></span>');
    	       jq("#resultadoCodigoPostal").replaceWith('<span id="resultadoCodigoPostal"></span>');
    	       jq("#noEncontrado").replaceWith('<span id="noEncontrado">No se encontró un cliente con ese número</span>')
    	 }
     });
 });
}
</script>
</div>
</body>
</html>